<template>
  <div class="LogisticsNetwork">
    <Header></Header>
    <CarouselFigure></CarouselFigure>
    <Menu></Menu>
    <div class="container">
      <div class="title">
        <div class="pc">
          <p class="details">
            <span slot="sectionTitle">SAP(四川)产业赋能中心-SAP智慧企业</span>
          </p>
        </div>
        <div class="phone">
          <p class="details">
            <span slot="sectionTitle">SAP智慧企业</span>
          </p>
        </div>
        <div class="containerDetail">
          <div class="img">
            <el-image class="img" :src="list.videoLink"></el-image>
          </div>
          <div class="content">
            <h3>{{list.content}}</h3>
            <div v-for="(item,index) in list.childrenEntities" :key="index">
              <div class="LinkDetails">
                <p class="linkTitle">{{item.title}}</p>
                <div v-for="(items,index) in item.childrenEntities" :key="index">
                  <a :href="items.videoLink">
                    <p class="linkDetail">{{items.title}}</p>
                  </a>
                   <p class="dec">{{items.content}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CarouselFigure from "../../components/CarouselFigure";
import { ReqCenterInfo } from "../../request/index";
import Header from "../../components/Header";
import Menu from '../../components/Menu.vue'

export default {
  components: {
    Header,
    CarouselFigure,
    Menu
  },
  data() {
    return {
      list: []
    };
  },
  methods: {
    async getlist() {
      let data = {
        fromPage: 5
      };
      let list = await ReqCenterInfo(data);
      this.list = list.page[0];
      console.log(this.list);
    }
  },
  async created() {
    await this.getlist();
  }
};
</script>

<style>
.phone {
  display: none;
}
.pc{
  display: block;
  margin-bottom: 20px;
}
a {
  text-decoration: underline;
  color: #000;
}
.LogisticsNetwork {
  width: 100%;
  height: auto;
}
.LogisticsNetwork .container {
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
}
.LogisticsNetwork .container .containerDetail {
  display: flex;
  /* align-items: center; */
  /* justify-content: space-between; */
}
.LogisticsNetwork .container .img img {
  display: block;
  width: 100%;
  height: auto;
}
.LogisticsNetwork .container .containerDetail .content {
  /* width: 50%; */
  margin-left: 30px;
}
.LogisticsNetwork .container .containerDetail .content h3 {
  font-size: 16px;
  text-indent: 2em;
  color: #000;
  line-height: 2em;
}
.LogisticsNetwork .container .containerDetail .img {
  width: 400px;
  height: auto;
}
.LogisticsNetwork .container .title {
  margin: 20px 0 20px 0px;
}
.LogisticsNetwork .container .details {
  display: inline-block;
  height: 50px;
  background-color: rgb(1, 140, 191);
  line-height: 50px;
  padding: 0px 20px;
  font-weight: 400;
  font-size: 20px;
  color: rgb(255, 255, 255);
  text-align: center;
}
.LogisticsNetwork .container .LinkDetails {
  margin-bottom: 25px;
  margin-top: 25px;
  padding-bottom: 10px;
  box-shadow: #eee 0 5px 5px;
}
.LogisticsNetwork .container .linkTitle {
  font-size: 18px;
  margin-top: 20px;
  line-height: 30px;
  height: 30px;
  color: rgb(27, 147, 196);
  font-weight: 600;
}
.LogisticsNetwork .container .linkDetail {
  font-size: 16px;
  padding: 10px 0 10px 0;
  letter-spacing: 0.1em;
  line-height: 2em;
  font-weight: 600;
}
.LogisticsNetwork .container .LinkDetails .dec {
  font-size: 16px;
}
@media screen and (max-width: 1000px) {
  .pc{
    display: none;
  }
  .phone{
    display: block;
    margin-bottom: 20px;
  }
  .LogisticsNetwork .container .containerDetail {
    display: block;
  }
  .LogisticsNetwork .container .containerDetail .content {
    width: 100%;
    height: auto;
    margin-left: 0;
  }
  .LogisticsNetwork .container .containerDetail .img {
    width: 100%;
  }
  .LogisticsNetwork .container .containerDetail .img img {
    padding: 0 !important;
  }
  .sectionLogisticsNetworkCard .container .title {
    margin: 0;
  }
}
</style>